<!-- components/VideoProgress.vue -->
<template>
    <div class="video-progress-container">
      <!-- 内容行 -->
      <div class="content-row">
        <!-- 总时长 -->
        <!-- <div class="duration">
          <span class="dot">:</span>
          <span>{{ formatTime(totalTime) }}</span>
        </div> -->
  
        <!-- 进度条容器 -->
        <div class="progress-wrapper">
          <div 
            class="progress-bg"
            :style="{ width: progressBarWidth }"
          >
            <!-- 已观看进度 -->
            <div 
              class="progress-fill"
              v-for="(item, index) in watchedPercent" 
              :key="index"
              :style="{ width: item.width + '%', left: item.left + '%' }"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { computed } from 'vue'
  interface Quantum {
    start: number;
    end: number;
    width?: number | string,
    left?: number | string
  }
  //  props 定义
  interface VideoProgressProps {
    totalTime: number // 总时长（秒）
    watchedTime: number // 已观看时长（秒）
    watchedTimeQuantum: Quantum[] // 已观看时长（秒）的时间段
  }
  
  const props = defineProps<VideoProgressProps>()
  
  // 计算属性
  const watchedPercent = computed(() => {
    if (props.totalTime === 0) return 0
    return props.watchedTimeQuantum.map(item => {
       return { ...item, left: (item.start / props.totalTime) * 100, width: ((item.end - item.start) / props.totalTime) * 100 }
    })
    // return (props.watchedTime / props.totalTime) * 100
  })
  
  const progressBarWidth = computed(() => {
    // 动态控制进度条长度，可根据需求调整
    return '200px' 
  })
  
  // 时间格式化函数
  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60)
    const remainSeconds = Math.floor(seconds % 60)
    return (
      `${minutes.toString().padStart(2, '0')}:` +
      `${remainSeconds.toString().padStart(2, '0')}`
    )
  }
  </script>
  
  <style scoped>
  .video-progress-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 8px;
    width: 200px;
  }
  
  .content-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .duration {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #333;
    font-size: 16px;
  }
  
  .progress-wrapper {
    flex: 1;
    height:28px;
    background: #ebeaea;
    border-radius: 2px;
    overflow: hidden;
  }
  
  .progress-bg {
    display: flex;
    align-items: center;
    height: 100%;
    /* 进度条动画 */
    transition: width 0.3s ease; 
    position: relative;
  }
  
  .progress-fill {
    height: 100%;
    background: #42b983; /* 可自定义进度条颜色 */
    /* border-radius: 2px; */
    position: absolute;
  }
  </style>